<template>
    <view class="box">
        <view class="ceiling" :style="{ 'padding-top': statusBarHeight + 'px' }"></view>
        <uni-nav-bar left-icon="back" backgroundColor="#EE515A" color="#ffffff" @clickLeft="handleBack">
            <view style="width: 100%;text-align: center;">{{toptitle}}</view>
        </uni-nav-bar>
        <view class="bg_FFFFFF">

            <view class="cu-form-group">
                <view class="title text-black">转入金额</view>
                <input placeholder="请输入转入金额" class="color_A8AFC2" name="input" type="number"
                    v-model="form.money"></input>
                <view>
                    <image src="/static/images/icon/money.png" mode="widthFix" style="width: 40rpx;"></image>
                </view>
            </view>

            <view class="cu-form-group">
                <view class="title text-black">账户姓名</view>
                <input placeholder="请填写账户姓名" class="color_A8AFC2" name="uname" v-model="dataList.name"></input>
                <view>
                    <image @click="copy(dataList.name)" src="/static/imgs/bankslices/fuzhi.png" mode="widthFix"
                        style="width: 40rpx;"></image>
                </view>
            </view>

            <view class="cu-form-group">
                <view class="title text-black">开户银行</view>
                <input placeholder="请填写开户银行" class="color_A8AFC2" name="bank" v-model="dataList.openbank"></input>
                <view>
                    <image @click="copy(dataList.openbank)" src="/static/imgs/bankslices/fuzhi.png" mode="widthFix"
                        style="width: 40rpx;"></image>
                </view>
            </view>


            <view class="cu-form-group">
                <view class="title text-black">银行卡号</view>
                <input placeholder="请填写银行卡号" class="color_A8AFC2" name="ucardno" v-model="dataList.cardno"></input>
                <view>
                    <image @click="copy(dataList.cardno)" src="/static/imgs/bankslices/fuzhi.png" mode="widthFix"
                        style="width: 40rpx;"></image>
                </view>
            </view>
        </view>

        <!-- 确认修改 开始 -->
        <view class="margin-top-sm bg_FFFFFF padding-lr" v-if="flag == 0 || flag == 3">
            <view class="text-lg text-black padding-top">请上传凭证照片</view>
            <view class="flex justify-between padding-tb-lg">
                <u-upload :custom-btn="true" :file-list="fileList" @on-uploaded="onUploadedz" image-mode=""
                    max-count="1" width="324rpx" height="279rpx" :action="action">
                    <view slot="addBtn" class="slot-btnf" hover-class="slot-btn__hover" hover-stay-time="150"></view>
                </u-upload>
            </view>
        </view>
        <view class="padding-lr-xl padding-top-lg flex">
            <text style="width: 50%;" v-if="urlzTipShow">{{urlzText}}</text>
        </view>
        <view class="padding-lr-xl padding-top-lg flex flex-direction">
            <button class="cu-btn bg-blue lg" @click="addRecharge">确认存入</button>
        </view>
        <!-- 确认修改 结束 -->
    </view>
</template>

<script>
    import httpHost from '@/common/httpRequest.js'
    import selectHead from "@/component/selectHead/selectHead.vue"
    import uniCopy from '@/js_sdk/xb-copy/uni-copy.js'
    export default {
        data() {
            return {
                form: {
                    money: '',
                },
                dataList: [],
                statusBarHeight: getApp().globalData.statusBarHeight, //状态栏高度
                action: httpHost.config('UPLOADHOST'),
                urlz: '0',
                urlzTipShow: false,
                urlzText: '上传中',
                fileList: [],
                toptitle: '',
                remark: '',
                flag: "",
            };
        },
        methods: {
            //返回上一级页面
            handleBack() {
                console.log(1)
                uni.redirectTo({
                    url: "/pages/member/recharge"
                });
            },
            //新增数据
            addRecharge() {
                if (!this.form.money) {
                    uni.showToast({
                        title: '请输入汇款金额',
                        duration: 2000,
                        icon: "none"
                    });
                    return;
                }
                  //先关闭。不然老是出错
                // if (!this.urlz) {
                //     uni.showToast({
                //         title: '请上传凭证',
                //         duration: 2000,
                //         icon: "none"
                //     });
                //     return;
                // }

                if (this.dataList == null || this.dataList.length == 0) {
                    uni.showToast({
                        title: '未选择对公账户，请联系客服或稍后再试！',
                        duration: 2000,
                        icon: "none"
                    });
                    return;
                }

                var that = this;
                uni.showLoading({
                    title: '提交中...',
                    mask: true
                })
                this.$Request.post(this.$api.index.addRecharge, {
                    money: this.form.money,
                    thumb_url: this.urlz,
                    bankid: this.dataList.id,
                }).then(res => {
                    setTimeout(() => {
                        uni.hideLoading();
                        uni.showToast({
                            title: res.msg,
                            duration: 2000,
                            icon: "none"
                        });
                        that.form = {};
                        if (res.code == 0) {
                            uni.redirectTo({
                                url: "/pages/index/myMoney?current=4"
                            });
                        }
                    }, 2000);
                })
            },
            copy: function(msg) {
                uniCopy({
                    content: msg,
                    success: (res) => {
                        uni.showToast({
                            title: res,
                            icon: 'none'
                        })
                    },
                    error: (e) => {
                        uni.showToast({
                            title: e,
                            icon: 'none',
                            duration: 3000,
                        })
                    }
                })
            },
            getBank(t) {
                this.$Request.get(this.$api.index.getBankDetail, {
                    id: t
                }).then(res => {
                    if (res.code == 0) {
                        this.dataList = res.data
                    }
                })
            },
            onUploadedz(lists) {
                let result = lists[lists.length - 1].response;
                this.urlz = result.url;
                this.urlzTipShow = true
                this.urlzText = '上传成功'
            },

        },
        onLoad(e) {
            this.getBank(e.id);
            this.remark = '';
            this.flag = '';

        },
        onShow() {

        }

    };
</script>

<style lang="scss">
    @import './realname.scss';

    .cu-form-group {
        background-color: #FFFFFF;
    }

    .cu-form-group uni-input {
        color: #666666;
    }

    .cu-form-group+.cu-form-group {
        border-top: 1px solid #E5E5E5;
    }

    .title {
        min-width: 170rpx;
    }

    .card {
        width: 324rpx;
        height: 279rpx;

        image {
            width: 100%;
            height: 100%;
        }
    }

    .real_name_authentication {
        white-space: normal;
        width: 648upx;
        height: 80upx;
        padding: 0upx;
        clear: both;
        margin-top: 29upx;
        margin-left: 37upx;
        float: left;
        border-radius: 0upx;
        font-size: 24upx;
        line-height: 50upx;
    }

    .list_horizontal {
        width: auto;
        display: inline-block;
    }

    .real_name_authentication_1 {
        white-space: normal;
        width: 749upx;
        height: 1507upx;
        padding: 0upx;
        clear: both;
        float: left;
        background-color: #ffffff;
        border-radius: 0upx;
        font-size: 24upx;
    }

    .real_name_authentication_1 .real_name_authentication_41 {
        white-space: normal;
        width: 749upx;
        height: 76upx;
        padding: 0upx;
        clear: both;
        margin-top: 0upx;
        margin-left: 0upx;
        float: left;
        background-color: #f7f7f7;
        border-bottom-color: #e1e1e1;
        border-bottom-width: 1upx;
        border-bottom-style: solid;
        border-radius: 0upx;
        font-size: 24upx;
    }

    .real_name_authentication_1 .real_name_authentication_41 .real_name_authentication_2 {
        white-space: normal;
        width: 645upx;
        height: 25upx;
        padding: 0upx;
        margin-top: 22upx;
        margin-left: 36upx;
        float: left;
        border-radius: 0upx;
        color: #6464c8;
        font-size: 22upx;
        line-height: 25upx;
    }

    .real_name_authentication_1 .real_name_authentication_42 {
        white-space: normal;
        width: 749upx;
        height: 560upx;
        padding: 0upx;
        clear: both;
        margin-top: 0upx;
        margin-left: 8px;
        float: left;
        border-radius: 0upx;
        font-size: 24upx;
    }

    .real_name_authentication_1 .real_name_authentication_42 .real_name_authentication_7 {
        white-space: normal;
        width: 648upx;
        height: 28upx;
        padding: 0upx;
        clear: both;
        margin-top: 29upx;
        margin-left: 37upx;
        float: left;
        border-radius: 0upx;
        font-size: 24upx;
        line-height: 28upx;
    }

    .real_name_authentication_1 .real_name_authentication_42 .real_name_authentication_7 .real_name_authentication_8 {
        white-space: normal;
        width: 152upx;
        height: 28upx;
        padding: 0upx;
        margin-top: 0upx;
        margin-left: 0upx;
        float: left;
        border-radius: 0upx;
        color: #000;
        font-size: 24upx;
        line-height: 28upx;
    }

    .full_name {
        white-space: normal;
        width: 462upx;
        height: 50upx;
        min-height: 50upx;
        padding: 0upx;
        margin-top: 0upx;
        margin-left: 15upx;
        float: left;
        border-radius: 0upx;
        color: #000;
        font-size: 27upx;
        line-height: 50upx;
    }

    .real_name_authentication_1 .real_name_authentication_42 .real_name_authentication_10 {
        white-space: normal;
        width: 710upx;
        height: 2upx;
        padding: 0upx;
        clear: both;
        margin-top: 34upx;
        margin-left: 38upx;
        float: left;
        border-radius: 0upx;
        font-size: 24upx;
        line-height: 2upx;
    }

    .real_name_authentication_1 .real_name_authentication_42 .real_name_authentication_11 {
        white-space: normal;
        width: 686upx;
        height: 32upx;
        padding: 0upx;
        clear: both;
        margin-top: 28upx;
        margin-left: 37upx;
        float: left;
        border-radius: 0upx;
        font-size: 24upx;
        line-height: 32upx;
    }

    .real_name_authentication_1 .real_name_authentication_42 .real_name_authentication_11 .real_name_authentication_12 {
        white-space: normal;
        width: 152upx;
        height: 32upx;
        padding: 0upx;
        margin-top: 0upx;
        margin-left: 0upx;
        float: left;
        border-radius: 0upx;
        color: #000;
        font-size: 24upx;
        line-height: 28upx;
    }

    .real_name_authentication_1 .real_name_authentication_42 .real_name_authentication_11 .please_fill_in_the_id_card_number_or_take_photos {
        white-space: normal;
        width: 462upx;
        height: 32upx;
        min-height: 23upx;
        padding: 0upx;
        margin-top: 0upx;
        margin-left: 15upx;
        float: left;
        border-radius: 0upx;
        color: #000;
        font-size: 24upx;
        line-height: 32upx;
    }

    .real_name_authentication_1 .real_name_authentication_42 .real_name_authentication_11 .real_name_authentication_14 {
        white-space: normal;
        width: 37upx;
        height: 32upx;
        padding: 0upx;
        margin-top: 0upx;
        margin-left: 18upx;
        float: left;
        border-radius: 0upx;
        font-size: 24upx;
        line-height: 32upx;
    }

    .real_name_authentication_1 .real_name_authentication_42 .real_name_authentication_15 {
        white-space: normal;
        width: 711upx;
        height: 2upx;
        padding: 0upx;
        clear: both;
        margin-top: 31upx;
        margin-left: 37upx;
        float: left;
        border-radius: 0upx;
        font-size: 24upx;
        line-height: 2upx;
    }

    .real_name_authentication_1 .real_name_authentication_42 .real_name_authentication_16 {
        white-space: normal;
        width: 681upx;
        height: 34upx;
        padding: 0upx;
        clear: both;
        margin-top: 27upx;
        margin-left: 37upx;
        float: left;
        border-radius: 0upx;
        font-size: 24upx;
        line-height: 34upx;
    }

    .real_name_authentication_1 .real_name_authentication_42 .real_name_authentication_16 .real_name_authentication_17 {
        white-space: normal;
        width: 152upx;
        height: 34upx;
        padding: 0upx;
        margin-top: 0upx;
        margin-left: 0upx;
        float: left;
        border-radius: 0upx;
        color: #000;
        font-size: 24upx;
        line-height: 28upx;
    }

    .real_name_authentication_1 .real_name_authentication_42 .real_name_authentication_16 .please_fill_in_your_bank_card_number {
        white-space: normal;
        width: 462upx;
        height: 34upx;
        min-height: 23upx;
        padding: 0upx;
        margin-top: 0upx;
        margin-left: 15upx;
        float: left;
        border-radius: 0upx;
        color: #000;
        font-size: 24upx;
        line-height: 34upx;
    }

    .real_name_authentication_1 .real_name_authentication_42 .real_name_authentication_16 .real_name_authentication_19 {
        white-space: normal;
        width: 33upx;
        height: 34upx;
        padding: 0upx;
        margin-top: 0upx;
        margin-left: 17upx;
        float: left;
        border-radius: 0upx;
        font-size: 24upx;
        line-height: 34upx;
    }

    .real_name_authentication_1 .real_name_authentication_42 .real_name_authentication_20 {
        white-space: normal;
        width: 710upx;
        height: 2upx;
        padding: 0upx;
        clear: both;
        margin-top: 31upx;
        margin-left: 38upx;
        float: left;
        border-radius: 0upx;
        font-size: 24upx;
        line-height: 2upx;
    }

    .real_name_authentication_1 .real_name_authentication_42 .real_name_authentication_21 {
        white-space: normal;
        width: 685upx;
        height: 68upx;
        padding: 0upx;
        clear: both;
        margin-top: 10upx;
        margin-left: 37upx;
        float: left;
        border-radius: 0upx;
        font-size: 24upx;
        line-height: 68upx;
    }

    .real_name_authentication_1 .real_name_authentication_42 .real_name_authentication_21 .real_name_authentication_22 {
        white-space: normal;
        width: 152upx;
        height: 28upx;
        padding: 0upx;
        margin-top: 18upx;
        margin-left: 0upx;
        float: left;
        border-radius: 0upx;
        color: #000;
        font-size: 24upx;
        line-height: 28upx;
    }

    .real_name_authentication_1 .real_name_authentication_42 .real_name_authentication_21 .cell_phone_number {
        white-space: normal;
        width: 286upx;
        height: 23upx;
        min-height: 23upx;
        padding: 0upx;
        margin-top: 21upx;
        margin-left: 16upx;
        float: left;
        border-radius: 0upx;
        color: #000;
        font-size: 24upx;
        line-height: 23upx;
    }

    .real_name_authentication_1 .real_name_authentication_42 .real_name_authentication_21 .real_name_authentication_24 {
        white-space: normal;
        width: 148upx;
        height: 68upx;
        padding: 0upx;
        margin-top: 0upx;
        margin-left: 80upx;
        float: left;
        background-color: #ffffff;
        text-align: center;
        justify-content: center;
        border-color: #4494cf;
        border-width: 1upx;
        border-style: solid;
        border-radius: 30upx;
        color: #4494cf;
        font-size: 24upx;
        line-height: 68upx;
    }

    .real_name_authentication_1 .real_name_authentication_43 {
        white-space: normal;
        width: 749upx;
        height: 147upx;
        padding: 0upx;
        clear: both;
        margin-top: 0upx;
        margin-left: 0upx;
        float: left;
        background-color: #f8f8f8;
        border-radius: 0upx;
        font-size: 24upx;
    }

    .real_name_authentication_1 .real_name_authentication_43 .real_name_authentication_27 {
        white-space: normal;
        width: 138upx;
        height: 31upx;
        padding: 0upx;
        clear: both;
        margin-top: 27upx;
        margin-left: 28upx;
        float: left;
        border-radius: 0upx;
        font-size: 24upx;
        line-height: 31upx;
    }

    .real_name_authentication_1 .real_name_authentication_43 .real_name_authentication_27 .real_name_authentication_28 {
        white-space: normal;
        width: 109upx;
        height: 24upx;
        padding: 0upx;
        margin-top: 6upx;
        margin-left: 0upx;
        float: left;
        border-radius: 0upx;
        color: #6464c8;
        font-size: 23upx;
        line-height: 24upx;
    }

    .real_name_authentication_1 .real_name_authentication_43 .real_name_authentication_27 .real_name_authentication_29 {
        white-space: normal;
        width: 28upx;
        height: 28upx;
        padding: 0upx;
        margin-top: 0upx;
        margin-left: 0upx;
        float: left;
        border-radius: 0upx;
        font-size: 24upx;
        line-height: 28upx;
    }

    .real_name_authentication_1 .real_name_authentication_43 .type {
        white-space: normal;
        width: 691upx;
        height: 54upx;
        padding: 0upx;
        clear: both;
        margin-top: 18upx;
        margin-left: 29upx;
        float: left;
        border-radius: 0upx;
        font-size: 24upx;
        line-height: 54upx;
    }

    .real_name_authentication_1 .real_name_authentication_43 .type .real_name_authentication_31 {
        white-space: normal;
        width: auto;
        height: 48upx;
        padding: 0upx;
        margin-top: 4upx;
        margin-left: 0upx;
        float: left;
        border-radius: 0upx;
        font-size: 24upx;
        line-height: 48upx;
    }

    .real_name_authentication_1 .real_name_authentication_43 .type .real_name_authentication_32 {
        white-space: normal;
        width: auto;
        height: 27upx;
        padding: 0upx;
        margin-top: 14upx;
        margin-left: 15upx;
        float: left;
        border-radius: 0upx;
        color: #000;
        font-size: 24upx;
        line-height: 27upx;
    }

    .real_name_authentication_1 .real_name_authentication_43 .type .real_name_authentication_33 {
        white-space: normal;
        width: auto;
        height: 51upx;
        padding: 0upx;
        margin-top: 2upx;
        margin-left: 42upx;
        float: left;
        border-radius: 0upx;
        font-size: 24upx;
        line-height: 51upx;
    }

    .real_name_authentication_1 .real_name_authentication_43 .type .real_name_authentication_34 {
        white-space: normal;
        width: auto;
        height: 27upx;
        padding: 0upx;
        margin-top: 14upx;
        margin-left: 14upx;
        float: left;
        border-radius: 0upx;
        color: #000;
        font-size: 24upx;
        line-height: 27upx;
    }

    .real_name_authentication_1 .real_name_authentication_35 {
        white-space: normal;
        width: 518upx;
        height: 54upx;
        padding: 0upx;
        clear: both;
        margin-top: 15upx;
        margin-left: 46upx;
        float: left;
        border-radius: 0upx;
        font-size: 24upx;
        line-height: 54upx;
    }

    .real_name_authentication_1 .real_name_authentication_35 .real_name_authentication_36 {
        white-space: normal;
        width: auto;
        height: 35upx;
        padding: 0upx;
        margin-top: 9upx;
        margin-left: 0upx;
        float: left;
        border-radius: 0upx;
        font-size: 24upx;
        line-height: 35upx;
    }

    .real_name_authentication_1 .real_name_authentication_35 .real_name_authentication_37 {
        white-space: normal;
        width: auto;
        height: 24upx;
        padding: 0upx;
        margin-top: 19upx;
        margin-left: 5upx;
        float: left;
        border-radius: 0upx;
        color: #6464c8;
        font-size: 24upx;
        line-height: 24upx;
    }

    .real_name_authentication_1 .real_name_authentication_35 .real_name_authentication_38 {
        white-space: normal;
        width: auto;
        height: 26upx;
        padding: 0upx;
        margin-top: 19upx;
        margin-left: 15upx;
        float: left;
        border-radius: 0upx;
        color: #3e96da;
        font-size: 22upx;
        line-height: 26upx;
    }

    .real_name_authentication_1 .btSubmit {
        white-space: normal;
        width: 674upx;
        height: 84upx;
        padding: 0upx;
        clear: both;
        margin-top: 84upx;
        margin-left: 37upx;
        float: left;
        background-color: rgb(222, 46, 46);
        text-align: center;
        justify-content: center;
        border-radius: 30upx;
        cursor: pointer;
        color: #ffffff;
        font-size: 24upx;
        line-height: 84upx;
    }

    .real_name_authentication_1 .real_name_authentication_40 {
        white-space: normal;
        width: 231upx;
        height: 26upx;
        padding: 0upx;
        clear: both;
        margin-top: 615upx;
        margin-left: 261upx;
        float: left;
        border-radius: 0upx;
        font-size: 24upx;
        line-height: 26upx;
    }

    .contact {
        margin: 5%;
    }

    .slot-btn {
        margin-top: 20upx;
        width: 300rpx;
        height: 200rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgb(244, 245, 246);
        border-radius: 10rpx;
        background-image: url(/static/img/10.jpg);
        background-size: 10% 10%;
    }

    .slot-btnbank {
        margin-top: 20upx;
        width: 300rpx;
        height: 200rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgb(244, 245, 246);
        border-radius: 10rpx;
        background-image: url(/static/img/bank.png);
        background-size: 100% 100%;
    }

    .slot-btnf {
        margin-top: 20upx;
        width: 300rpx;
        height: 200rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgb(244, 245, 246);
        border-radius: 10rpx;
        background-image: url(/static/img/9.jpg);
        background-size: 100% 100%;
    }

    .slot-btn__hover {
        background-color: rgb(235, 236, 238);

    }

    .pre-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .pre-item {
        flex: 0 0 48.5%;
        border-radius: 10rpx;
        height: 140rpx;
        overflow: hidden;
        position: relative;
        margin-bottom: 20rpx;
    }

    .pre-item-image {
        width: 100%;
        height: 140rpx;
    }

    .audit-hit {
        height: 120rpx;
        width: 100%;
        line-height: 120rpx;
        padding-left: 25rpx;
        font-size: 40rpx;
        text-align: center;
        font-weight: 600;
    }

    .warn {
        color: #FFB800;
    }

    .error {
        color: #FF5722;
    }

    .normal {
        color: #5FB878;
    }

    .remark {
        width: 100%;
        padding: 0px 20px;
    }

    .remark-title {
        height: 40px;
        color: #FF5722;
        font-weight: 600;
    }
</style>
